<template>
	<view class="content">
		<view :class="loading ? 'fade-in' : 'fade-out'">
			<view class="searchInput">
				<view class="input">
					<image :src="$imgs.indexInput" mode=""></image>
					<input type="text" placeholder="请输入城市名称" placeholder-class="pClass" v-model="keyValue"
						@input="keyValueChange" />
				</view>
			</view>
			<view class="cityList" v-show="!show">
				<scroll-view scroll-y="true" class="scroll-view" :style="{height:h+'px'}" :scroll-into-view="toView"
					:scroll-with-animation="true">
					<block v-for="(item,index) in cityList" :key="index">
						<view class="label" :id="item.idx">{{item.idx}}</view>
						<view class="city-kuai">
							<block v-for="(e,i) in item.cities" :key="i">
								<view class="city-text" @click="setCity(e.city_name)">
									{{e.city_name}}
								</view>
							</block>
						</view>
					</block>
				</scroll-view>
			</view>
			<!-- 侧边 -->
			<view class="broadside" v-show="!show">
				<block v-for="(item,index) in classify_nav" :key="index">
					<view class="idx" @click="tagClick(item.idx)">{{item.idx}}</view>
				</block>
			</view>
			<!-- 搜索显示区域 -->
			<view class="searchCity" v-show="show" :style="{height:h+'px'}">
				<block v-for="(e,i) in searchCityList" :key="i">
					<view class="city-text" @click="setCity(e.city_name)">
						{{e.city_name}}
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import cityList from "./status/acity.js"
	import {
		GDWEBKEY
	} from '@/siteinfo.js'
	let eventChannel = ''
	export default {
		data() {
			return {
				h: 0,
				cityList: [],
				classify_nav: [],
				toView: '',
				show: false,
				searchCityList: [],
				keyValue: '',
				loading: false, //是否显示加载页面
				list: []

			};
		},
		onLoad() {
			uni.showLoading()
			eventChannel = this.getOpenerEventChannel();
			this.cityList = cityList.data.city_nav
			this.classify_nav = cityList.data.classify_nav
			this.h = this.vuex_window_height - this.vuex_custom_bar_height - uni.upx2px(128)
			setTimeout(() => {
				this.list = this.cityList.map(res => {
					return res.cities
				}).flat()
			}, 500)

		},
		onReady() {
			uni.hideLoading()
			this.loading = true
		},
		methods: {
			tagClick(item) {
				uni.showToast({
					title: item,
					icon: 'none',
					position: 'center'
				});
				this.toView = item
			},
			keyValueChange(e) {
				if (e.detail.value != '') {
					this.searchCityList = this.list.filter((res => {
						return res.city_name.indexOf(e.detail.value) != -1
					}))
					this.show = true
				} else {
					this.show = false
					this.searchCityList = []
				}
			},
			setCity(name) {
				console.log(name)
				this.GDAPI(name)
			},
			GDAPI(city) {
				uni.request({
					url: 'https://restapi.amap.com/v3/geocode/geo?parameters',
					method: "GET",
					data: {
						key: GDWEBKEY,
						city,
						address: city
					},
					success: (res) => {
            console.log(res.data)
						if (res.data.status == 1) {
							let data = res.data.geocodes[0]
							let city = data.district.length ? data.district : data.city
							let location = data.location.split(',')
							let obj = {
								city,
								lng: location[0],
								lat: location[1]
							}
							eventChannel.emit('getLocation', obj)
							uni.navigateBack({
								delta: 1
							})
						} else {
							this.msg('地址解析失败,重新选择')
						}
					}
				})
			},

		}

	}
</script>
<style lang="scss" scoped>
  uni-page-body{
    background: #fff;
  }
	.content {
		.searchInput {
			height: 128rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.input {
				width: 690rpx;
				height: 72rpx;
				background: #efefef;
				border-radius: 12rpx;
				padding: 0 24rpx;
				display: flex;
				align-items: center;

				image {
					width: 24rpx;
					height: 26rpx;
					margin-right: 16rpx;
				}

				input {
					color: $uni-text-color;
				}
			}

			.pClass {
				color: $uni-input-placeholder-color;
				font-size: 28rpx;
			}
		}

		.cityList {
			.scroll-view {
				.label {
          height: 30px;
          background: #efefef;
          font-size: 14px;
          font-weight: bold;
          color: #333333;
          line-height: 30px;
          padding-left: 15px;
				}

				.city-kuai {
					padding: 0 30rpx;

					.city-text {
						height: 109rpx;
						border-bottom: 1px solid #ebebed;
						font-size: 32rpx;
						font-weight: 400;
						color: #080808;
						line-height: 109rpx;
					}
				}
			}
		}

		.broadside {
			font-size: 22rpx;
			font-weight: 400;
			color: #999999;
			position: absolute;
			right: 34rpx;
			top: 110px;

			.idx {
				margin-bottom: 15rpx;
			}
		}

		.searchCity {
			padding: 0 30rpx;
			overflow-y: auto;

			.city-text {
				height: 109rpx;
				border-bottom: 1px solid #1E1F2E;
				font-size: 32rpx;
				font-weight: 400;
				color: #CCCCCC;
				line-height: 109rpx;
			}
		}


	}
</style>
